<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>歌单评论</title>
		<script src="../../js/vue.js"></script>
		<script src="../../js/element.js"></script>
		<script src="../../js/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/element.css" />
		<link rel="stylesheet" type="text/css" href="../../fonts/iconfont/iconfont.css" />
		<link rel="stylesheet" href="../../css/album/comment.css">
	</head>
	<body>
		<div id="app">
			<!-- 发送评论 -->
			<div class="header">
				<!-- 发布评论 -->
				<div class="release">
					<!-- 用户头像 -->
					<span class="userImg">
						<img :src="userInfo.img">
					</span>
					<!-- 评论 -->
					<span class="commentTextarea">
						<textarea v-model="comment.content"></textarea>
					</span>
					<!-- 发布按钮 -->
					<span class="commentButton" @click="addComment">
						发布
					</span>
				</div>
			</div>
			<!-- 评论 -->
			<div class="main">
				<div class="sort">
					<span class="sort-hot" @click="sortHot">最热</span>&nbsp; |&nbsp;
					<span class="sort-new" @click="sortNew">最新</span>
				</div>

				<!-- 评论分页 -->
				<div class="commentList">
					<ul class="infinite-list">
						<li v-for="comment in commentList" class="infinite-list-item">
							<div>
								<span class="userImg"><img :src="comment.user.img"></span>
								<span class="main">
									<div class="nickName">{{comment.user.nickName}}</div>
									<div class="content">
										<div>{{comment.content}}</div>
										<p></p>
										<div>
											<span class="time">{{comment.time}}</span>
											<!-- 点赞 -->
											<span class="thumbs-up">
												<i v-if="comment.isThumbs==1" class="iconfont icon-dianzan2"
													style="color: #FC6C62;" @click="thumbs(comment.id,0)">&nbsp;&nbsp;{{comment.thumbsCount}}</i>
												<i v-else class="iconfont icon-dianzan" @click="thumbs(comment.id,1)">&nbsp;&nbsp;{{comment.thumbsCount}}</i>
											</span>
											<span class="reply"
												@click="addCommentReplyParameter(comment.id, comment.user.nickName)">回复</span>
										</div>
										<p></p>
										<ul if="comment.reply.length!=0">
											<li class="replyLi" v-for="reply in comment.reply">
												<span class="userImg"><img :src="reply.user.img"></span>
												<span class="main">
													<span class="nickName">{{reply.user.nickName}}</span>
													<span class="targetName"
														v-if="reply.targetUser!=null&&reply.targetUser!=''">
														<div></div>
														@ {{reply.targetUser.nickName}}
													</span>
													<div v-else>

													</div>
													<div class="content">
														<div>{{reply.content}}</div>
													</div>
													<div>
														<span class="time">{{reply.time}}</span>
														<span class="thumbs-up">
															<i v-if="reply.isThumbs==1" class="iconfont icon-dianzan2"
																style="color: #FC6C62;" @click="thumbs(reply.id, 0)">&nbsp;&nbsp;{{reply.thumbsCount}}</i>
															<i v-else class="iconfont icon-dianzan" @click="thumbs(reply.id, 1)">&nbsp;&nbsp;{{reply.thumbsCount}}</i></span>
														<span class="reply"
															@click="addReplyToReplyParameter(comment.id, reply.user.id, reply.user.nickName)">回复</span>
													</div>
												</span>
											</li>
										</ul>
										<br>
										<hr>
									</div>
								</span>
							</div>
						</li>
						<!-- 分页 -->
						<div class="block">
							<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
								:current-page="pageCurrent" :page-sizes="[10, 15]" :page-size="pageSize"
								layout="total, sizes, prev, pager, next, jumper" :total="total">
							</el-pagination>
						</div>
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script>
		// backTop 监听页面滚动
		window.addEventListener('scroll', this.isScroll)

		function isScroll() {
			// 监听页面滚动事件
			// 垂直滚动距离
			var oTop = document.body.scrollTop || document.documentElement.scrollTop
			// console.log(oTop)
			var headerDocument = document.querySelector('.header');
			if (oTop > 0) {
				if (!headerDocument.classList.contains('.scroll')) {
					// 添加类名 
					headerDocument.classList.add('scroll')
				}
			} else {
				if (headerDocument.classList.contains('scroll')) {
					// 删除类名
					headerDocument.classList.remove('scroll')
				}
			}
		}

		new Vue({
			el: '#app',
			data: function() {
				return {
					pageCurrent: 1, //评论分页当前页码
					pageSize: 15, //评论分页每页条数
					total: 0,
					album: '', //专辑信息
					commentList: '', //评论分页信息
					userInfo: '', //登录用户信息
					order: 'hot', //评论排序
					//用户发表的评论
					comment: {
						relevance: '', //关联字段
						content: '', //评论内容
						tableType: 3, //评论表的类型
						type: 1, //评论的类型 
						userId: '', //评论用户的id
						targetId: 0, //被评论人的id
					},
				}
			},
			mounted() { // 生命周期函数
				this.getFatherInfo(),
					this.getComment(),
					this.getUserInfo()
			},
			methods: {
				load() {
					this.count += 1
				},
				// 获取父页面的一些数据
				getFatherInfo() {
					var data = window.parent.toChildData
					this.album = data
					console.log(data)
					this.comment.relevance = this.album.id
					return this.album.id
				},
				// 获取登录用信息
				getUserInfo() {
					axios({
						method: 'get',
						url: 'http://localhost:8160/user/getUserInfo',
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						}
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							// 赋值
							this.userInfo = res.data.data.userInfo
						} else {
							this.$message.error(res.data.message)
						}
					})
				},
				// 评论根据最热排序（点赞数+评论数）
				sortHot() {
					const newDocument = document.querySelector('.sort-new')
					newDocument.style.color = '#9499A0'
					const hotDocument = document.querySelector('.sort-hot')
					hotDocument.style.color = '#FC6C62'
					this.order = 'hot'
					this.getComment()
				},
				// 评论根据时间排序（显示最新评论）
				sortNew() {
					const hotDocument = document.querySelector('.sort-hot')
					hotDocument.style.color = '#9499A0'
					const newDocument = document.querySelector('.sort-new')
					newDocument.style.color = '#FC6C62'
					this.order = 'time'
					this.getComment()
				},
				// 获取评论列表（每回15条）
				getComment() {
					var data = window.parent.toChildData
					this.album = data
					axios({
						method: 'get',
						url: 'http://localhost:8160/sheet/commentPage/'+ this.order + '/' + this.album.id + '/' + this
							.pageCurrent +
							'/' + this.pageSize,
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						}
					}).then(res => {
						console.log(res.data)
						if (res.data.code == 200) { //成功
							console.log(res.data)
							var commentPageInfo = res.data.data.commentPage
							this.commentList = commentPageInfo.records
							//2、将后端分页信息也赋值给前端相应字段
							this.pageCurrent = commentPageInfo.current
							this.pageSize = commentPageInfo.size
							this.total = commentPageInfo.total
						} else {
							this.$message.error("系统错误请联系管理员！")
						}
					})
				},
				//更新每页条数
				handleSizeChange(val) {
					// console.log(`每页 ${val} 条`);
					this.pageSize = val
					this.getComment()
				},
				//更新当前页
				handleCurrentChange(val) {
					// console.log(`当前页: ${val}`);
					this.pageCurrent = val
					this.getComment()
				},
				// 添加评论所需参数
				addCommentParameter() {
					// 2、评论类型 1：评论 2：回复
					this.comment.tableType = 3
					this.comment.content = ''
					this.comment.type = 1
					this.comment.targetId = 0
					// 3、关联字段 关联专辑的 Id
					this.comment.relevance = this.album.id

					// 3、设置评论文本域里的提示信息
					const textareaDocument = document.querySelector('textarea')
					textareaDocument.placeholder = ''
				},
				// 添加评论的回复所需参数
				addCommentReplyParameter(commentId, targetName) {
					// 1、评论类型 1：评论 2：回复
					this.comment.type = 2
					this.comment.targetId = 0
					// 2、关联字段 关联要回复的评论 id
					this.comment.relevance = commentId

					// 3、设置评论文本域里的提示信息
					const textareaDocument = document.querySelector('textarea')
					textareaDocument.placeholder = '回复 @' + targetName + ':'
				},
				// 添加回复的回复所需参数
				addReplyToReplyParameter(commentId, targetId, targetName) {
					// 1、评论类型 1：评论 2：回复
					this.comment.type = 2
					this.comment.targetId = targetId
					// 2、关联字段 关联要回复的评论 id
					this.comment.relevance = commentId

					// 3、设置评论文本域里的提示信息
					const textareaDocument = document.querySelector('textarea')
					textareaDocument.placeholder = '回复 @' + targetName + ':'
				},
				// 添加评论
				addComment() {
					if (this.comment != '' && this.comment != null) {
						axios({
							method: 'post',
							url: 'http://localhost:8160/sheet/addComment',
							data: this.comment,
							headers: {
								'token': this.getCookie('yxy-pre:user_token')
							}
						}).then(res => {
							if (res.data.code == 200) { //成功
								console.log(res.data)
								// var commentPageInfo = res.data.data.commentPage
								// this.commentList = commentPageInfo.records
								// 刷新评论
								this.getComment()
								// 刷新父页面的评论数
								window.parent.getSheetById()
								// 重新设置 添加评论参数
								this.addCommentParameter()
							} else {
								this.$message.error("系统错误请联系管理员！")
							}
						})
					}
				},
				//点赞与取消点赞 flag:1 点赞 flag:0 取消点赞
				thumbs(id, flag){
					axios({
						method: 'put',
						url: 'http://localhost:8160/album/thumbs/'+id+'/'+flag,
						data: this.comment,
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						}
					}).then(res => {
						if (res.data.code == 200) { //成功
							console.log(res.data)
							//刷新评论
							this.getComment()
						} else {
							this.$message.error("系统错误请联系管理员！")
						}
					})
				},
				// 通过值获取cookie
				getCookie(key) {
					// 如果浏览器中有多个cookie，会以 ；分隔 例如：a=a1;b=b1
					// 根据 ；将 cookie 字符串分割成数组 
					var cookieArr = document.cookie.split("; ");
					// 遍历数组
					for (var i = 0; i < cookieArr.length; i++) {
						// 再根据 = 分隔数组中的每一个元素，数组第一个就是key，第二个就是value
						var cookiePair = cookieArr[i].split("=");
						if (key == cookiePair[0]) {
							return decodeURIComponent(cookiePair[1]);
						}
					}
					return null;
				},
			},
		})
	</script>
</html>